<template>
    <div class="welfare_list">
        <el-card shadow="never" >
            <div class="router-dom">
                <div class="router-item" v-for="item in customSonMenu"
                    :class="{ routerIndex: item.path == activeIndex }" @click="handMenuClick(item)" :key="item.path">
                    {{ item.title }} 
                </div>
            </div>
        </el-card>
<!--  立减金-->
<immediatelyMinusMoney v-if="showCom == 'immediately_minus_money'"></immediatelyMinusMoney>
<!-- 停车券 -->
<parkCode v-if="showCom == 'park_code'"></parkCode>
<!-- 虚拟会员 -->
<virtualMember v-if="showCom == 'virtual_member'"></virtualMember>
    </div>
</template>

<script setup lang="ts">
import { ref, provide ,watchEffect} from "vue"
import { useRoute } from "vue-router"
const route = useRoute()
import { storeToRefs } from 'pinia';
import { useCustomMenuStore } from "@/store/customMenu"

import immediatelyMinusMoney from "./immediately_minus_money/index.vue"
import parkCode from "./park_code/index.vue"
import virtualMember from "./equity_voucher/index.vue"

const { customSonMenu, activeIndex ,showCom,getKey} = storeToRefs(useCustomMenuStore())

watchEffect(()=>{
    const arr = activeIndex.value.split("/").slice(1)
    showCom.value = arr[2]
})
const handMenuClick = (item: any) => {
    activeIndex.value = item.path
    // 权限处理
}
</script>

<style lang="scss" scoped>
.router-dom {
    display: flex;
    height: 40px;
    align-items: center;

    .router-item {
        margin-right: 20px;
        cursor: pointer;
        font-family: Inter, Inter;
        font-weight: 400;
        font-size: 16px;
        color: #787878;
        font-style: normal;
        text-transform: none;
    }

    .routerIndex {
        font-family: Inter, Inter;
        font-weight: 400;
        font-size: 16px;
        color: #000000;
        font-style: normal;
        text-transform: none;
    }
}
</style>